<template>
  <div id="container">
    <el-row>
      <h1><i class="el-icon-eleme"></i>{{sysname}}</h1>
    </el-row>

    <el-row>
      <el-button type="primary" icon="el-icon-search" @click="toadd">添加</el-button>
    </el-row>

    <el-row>
      <el-table :data="list" style="width: 100%;">
        <el-table-column prop="title" label="标题" width="280" header-align="center" />
        <el-table-column prop="sellpoint" label="卖点" width="200" header-align="center" />
        <el-table-column prop="price" label="价格" align="right" width="100" header-align="center" />
        <el-table-column prop="intro" label="说明" header-align="center" />

        <el-table-column label="[操作]" width="220" header-align="center">
          <template slot-scope="s">
          <el-button type="success" @click="toupdate(s.$index, s.row)" icon="el-icon-check">修改</el-button>
                      <el-button type="danger" @click="del(s.$index)" icon="el-icon-close">删除</el-button>
                    </template>
        </el-table-column>

      </el-table>
    </el-row>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form :model="m" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="m.title"/>
          </el-form-item>

          <el-form-item label="卖点">
            <el-input v-model="m.sellpoint"/>
          </el-form-item>

          <el-form-item label="价格">
            <el-input v-model="m.price"/>
          </el-form-item>

          <el-form-item label="说明">
            <el-input  type="textarea" v-model="m.intro"/>
          </el-form-item>
          </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button @click="dialogVisible=false">确定</el-button>
         </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible=false">取消</el-button>
              <el-button @click="save">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Item",
    data() {
      return {
        sysname: "京东电商平台",
        dialogVisible: false,
        isupdate:false,
        index:null,
        m: {
          title: "",
          sellpoint: "",
          price: 0,
          intro: ""
        },
        list: [{
            title: "焊工手套",
            sellpoint: "编程相关婚纱人生如同喝一杯",
            price: "100",
            intro: "和规范化人数限制在"
          },
          {
            title: "java入门手册",
            sellpoint: "达内出品",
            price: "99",
            intro: "经典入门书籍"
          },
          {
            title: "法尔昂股份",
            sellpoint: "法人感染火热",
            price: "100",
            intro: "下哦i角加急FOIA好嘎嘎"
          },
          {
            title: "你还是结果是",
            sellpoint: "广发行犹太人很过分",
            price: "99",
            intro: "内核的痛苦上路"
          },
        ]
      }
    },
    methods: {
      toadd: function() {
        this.m={};
        this.dialogVisible = true;
        this.isupdate=flase;
      },
      toupdate:function(index,row){
        this.m=JSON.parse(JSON.stringify(row));
        this.dialogVisible=true;
        this.isupdate=true;
        this.index=index;
      },
      save: function() { //这个方法复用，新增和修改都使用它
              if (!this.isUpdate) {  //!取反，!true=false,!false=true；
                //在list数组中新增元素
                this.list.splice(0, 0, this.m);
              }else{
                //修改，index怎么来？在修改按钮通过插槽传入index，可以设置全局变量，来记录这个值
                //1.数据区：index变量，2.修改按钮，设置index，3.在这获取数据区index
                this.list.splice(this.index, 1, this.m);
              }
              this.dialogVisible = false;
            },
            del: function(index) {
              //通过插槽vue+element-ui提供，它就把index索引值传递过来
              //删除指定数组的索引值，删除1个
              this.list.splice(index, 1);
            }
    }
  }
</script>

<style>
   textarea{
      font-family: "微软雅黑";
    }
</style>
